<template>
	<view class="form-container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="form" :class="{ 'border-top-1': borderTop, 'border-bottom-1': borderBottom }">
				<view v-for="(field, index) of formDefinition.fields" :key="index" class="form-item border-bottom-1" :class="{ 'disabled': field.disabled }">
					<view class="item-label">{{ field.label }}</view>
					<view class="item-value">
						<template v-if="field.type === 'input'">
							<input v-if="(field.inputType || 'text') === 'text'" v-model="data[field.name]" type="text" :password="field.password || false" :name="field.name" :placeholder="field.placeholder" :disabled="field.disabled || false" :maxlength="field.maxLength || -1" placeholder-class="text-gray" />
							<input v-else-if="field.inputType === 'number'" v-model="data[field.name]" type="number" :password="field.password || false" :name="field.name" :placeholder="field.placeholder" :disabled="field.disabled || false" :maxlength="field.maxLength || -1" placeholder-class="text-gray" />
							<input v-else-if="field.inputType === 'digit'" v-model="data[field.name]" type="digit" :password="field.password || false" :name="field.name" :placeholder="field.placeholder" :disabled="field.disabled || false" :maxlength="field.maxLength || -1" placeholder-class="text-gray" />
							<textarea v-else-if="field.inputType === 'textarea'" v-model="data[field.name]" :placeholder="field.placeholder" :disabled="field.disabled" :maxlength="field.maxLength" placeholder-class="text-gray" />
						</template>
						<view v-else-if="field.type === 'select'" class="select" @click="!field.disabled && handleSelect(field.name, field.picker)">
							{{ (data[field.name] && data[field.name].label) || field.placeholder }} <view class="grace-iconfont icon-arrow-right"></view>
						</view>
						<picker v-else-if="field.type === 'date'" mode="date" :name="field.name" :value="data[field.name]" :start="field.startDate || ''" :end="field.endDate || ''" :disabled="field.disabled || false" @change="handleDateSelect">
							<view class="select" @click="handlePickDate(field.name)">
								{{ data[field.name] || field.placeholder }} <view class="grace-iconfont icon-arrow-right"></view>
							</view>
					   </picker>
						<switch v-else-if="field.type === 'switch'" :name="field.name" :disabled="field.disabled || false" :checked="originData[field.name] || false" :type="field.type || 'switch'" :color="field.color || ''" @change="({ detail: { value } }) => data[field.name] = value" />
						<radio-group v-else-if="field.type === 'radio'" :name="field.name" @change="({ detail: { value } }) => data[field.name] = value">
							<label v-for="(option, idx) of field.options" :key="idx">
								<radio :value="option.value" :checked="originData[field.name] === option.value" :disabled="option.disabled" :color="option.color || field.color || ''" />
								{{ option.label }}
							</label>
						</radio-group>
						<checkbox-group v-else-if="field.type === 'checkbox'" :name="field.name" @change="({ detail: { value } }) => data[field.name] = value">
							<label v-for="(option, idx) of field.options" :key="idx">
								<checkbox :value="option.value" :checked="option.checked || false" :disabled="option.disabled" :color="option.color || field.color || ''" />
								{{ option.label }}
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
			<view v-if="formDefinition.showSubmitBtn || formDefinition.showResetBtn" class="op-btn">
				<button v-if="formDefinition.showSubmitBtn" formType="submit" type="primary">提交</button>
				<button v-if="formDefinition.showResetBtn" formType="reset" type="warn">重置</button>
			</view>
		</form>
		<mpvue-picker
			ref="mpvuePicker"
			:themeColor="picker.themeColor"
			:mode="timeSelector"
			:deepLength="picker.deepLength"
			:pickerValueDefault="picker.pickerValueDefault"
			:pickerValueArray="picker.pickerValueArray"
			@onConfirm="handlePickerConfirm"
			@onCancel="handlePickerCancel"
			@onChange="handlePickerChange"
		/>
	</view>
</template>

<script>
	import MpvuePicker from 'mpvue-picker';
	export default {
		props: {
			formDefinition: {
				type: Object,
				required: true
			},
			data: {
				type: Object,
				required: true
			},
			borderTop: {
				type: Boolean,
				required: false,
				default: true
			},
			borderBottom: {
				type: Boolean,
				required: false,
				default: true
			}
		},
		components: {
			MpvuePicker
		},
		data() {
			return {
				name: '',
				picker: {},
				originData: this.$lodash.extend({}, this.data)
			};
		},
		methods: {
			handleSelect(name, picker) {
				this.picker = picker;
				this.name = name;
				this.$refs.mpvuePicker.show();
			},
			handlePickerConfirm({ label, value }) {
				this.data[this.name] = {
					label,
					value
				};
			},
			handlePickerCancel(cur) {
				this.$emit('pickerCancel', {
					name: this.name,
					...cur
				});
			},
			handlePickerChange(cur) {
				this.$emit('pickerChange', {
					name: this.name,
					...cur
				});
			},
			handlePickDate(name) {
				this.name = name;
			},
			handleDateSelect({ detail: { value } }) {
				this.data[this.name] = value;
			},
			formSubmit({ detail: { value } }) {
				this.$emit('submit', this.data);
			},
			formReset() {
				this.$emit('reset');
			}
		}
	}
</script>

<style lang="scss" scoped>
/* iconfont */
@font-face{font-family: "grace-iconfont"; src:url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff');}
.grace-iconfont{font-family:"grace-iconfont" !important; font-size:36upx; font-style:normal;}
.icon-shoppingcard:before{content:"\e60a";} .icon-share:before{content:"\e615";} .icon-position:before{content:"\e61c";}
.icon-safe:before{content:"\e687";} .icon-time2:before{content:"\e64c";} .icon-home:before{content:"\e608";} 
.icon-back:before{content:"\e616";} .icon-star:before{content:"\e645";} .icon-like:before{content:"\e645";}
.icon-zan:before{content:"\e6ea";} .icon-share2:before{content:"\e606";} .icon-pinglun:before{content:"\e6b8";}
.icon-weibo:before{content:"\e6cd";} .icon-weixin:before{content:"\e63e";}  .icon-qq:before{content:"\e63c";}
.icon-write:before{content:"\e69e";} .icon-remove:before{content:"\e684";} .icon-search:before{content:"\e604";}
.icon-close:before {content:"\e602";} .icon-close2:before {content:"\e78a";} .icon-refresh:before{content:"\e61a";} 
.icon-loading:before{content:"\e9db";} .icon-arrow-left:before{content:"\e600";} .icon-arrow-right:before{content:"\e601";}
.icon-arrow-up:before{content:"\e654";} .icon-arrow-down:before{content:"\e603";} .icon-right:before{content:"\e60f";} 
.icon-shoucang:before{content:"\e605";}  .icon-time:before{content:"\e607";} .icon-eye:before{content:"\e609";} 
.icon-shaixuan:before{content:"\e686";} .icon-share3:before{content:"\e622";} .icon-voice:before{content:"\e617";} 
.icon-photograph:before{content:"\e60b";} .icon-keyboard:before{content:"\e627";}
.form-container {
	width: 100%;
	
	.form {
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: #fff;
		padding-left: 28upx;
		box-sizing: border-box;
		
		.form-item {
			display: flex;
			align-items: center;
			padding: 28upx 0;
			padding-right: 28upx;
			box-sizing: border-box;
			
			&.disabled {
				opacity: 0.3;
			}
			
			&:last-child::after {
				height: 0;
			}
			
			.item-label {
				flex: 0 0 170upx;
				width: 170upx;
				padding-right: 14upx;
				word-break: break-all !important;
				font-size: $uni-font-size-base;
				line-height: $uni-font-size-lg;
			}
			
			.item-value {
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: $uni-font-size-base;
				color: $font-gray-color;
				
				.select {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					word-break: break-all !important;
					font-size: $uni-font-size-base;
					line-height: $uni-font-size-lg;
					
					.grace-iconfont {
						flex: 0 0 32upx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						width: 32upx;
						font-size: 32upx;
						font-weight: 900;
					}
				}
				
				input {
					flex: 1;
					font-size: $uni-font-size-base;
					color: $font-gray-color;
					text-align: right;
				}
				
				textarea {
					flex: 1;
					width: 100% !important;
					height: 130upx;
					word-break: break-all !important;
					font-size: $uni-font-size-base;
					line-height: $uni-font-size-lg;
					color: $font-gray-color;
					text-align: right;
				}
				
				slider {
					flex: 1;
				}
				
				radio-group {
					flex: 1;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-bottom: -12upx;
					
					radio {
						margin-bottom: 12upx;
					}
					
				}
				
				checkbox-group {
					flex: 1;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-bottom: -12upx;
					
					checkbox {
						margin-bottom: 12upx;
					}
					
				}
			}
		}
	}
	
	.op-btn {
		padding: 28upx;
		
		button:first-child {
			margin-bottom: 28upx;
		}
	}
}
</style>
